import PlanMotion from "./PlanMotion";
import useDrag from "@/hooks/useDrag";

const MotionForSort = ({ itemHeight, item, dataSource, onChange }) => {
  const { dragKey, handleMoveStart, handleMoveEnd, handleMove } = useDrag({
    ITEM_HEIGHT: itemHeight,
    dataSource,
    onChange,
  });

  return (
    <PlanMotion
      key={item.uuid}
      item={item}
      onTouchStart={(e) => {
        handleMoveStart(e, item.index, item.uuid);
      }}
      onTouchMove={handleMove}
      onTouchEnd={handleMoveEnd}
      style={{
        zIndex: dragKey === item.uuid ? 999 : 1,
        opacity: dragKey === item.uuid ? 0.5 : 1,
      }}
    />
  );
};

export default MotionForSort;
